import React, { Component } from "react";
import "./NavBar.css";

class NavBar extends Component {
    render() {
        let items = this.props.navs.map((data, index) => {
            return (
                <li key={data.id}>
                    <div
                        className="navItem"
                        style={{ color: this.props.activeIndex === data.id ? "#039be5" : "#607D8B" }}
                        onClick={() => {
                            this.props.changeActiveIndex(data.id);
                        }}
                    >
                        {data.label}
                    </div>
                </li>
            );
        });
        return (
            <div className="navigationBar">
                <h2>SpreadJS</h2>
                <nav>
                    <ul>{items}</ul>
                </nav>
            </div>
        );
    }
}

export default NavBar;
